Skip to content

Instantly share code, notes, and snippets.

@robisatthefunction

robisatthefunction/shopifyCartSummaryTemplate.json

Created September 9, 2024 22:05
Show Gist options
  • Save robisatthefunction/e28bced18cb00c0840695adae7dd1bb7 to your computer and use it in GitHub Desktop.
Save robisatthefunction/e28bced18cb00c0840695adae7dd1bb7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shopifyCartSummaryTemplate.json
{
"plugin_type": "widget",
"name": "Shopify Shopping Cart Summary",
"edit_page_url": "https://mrbeast.store/",
"form_schema": [
{
"default_value": "Your selections",
"name": "heading",
"field_type": "text",
"options": null,
"label": "Heading"
},
{
"default_value": "before",
"name": "position",
"field_type": "dropdown",
"options": {
"choices": [
{
"value": "before",
"label": "Before"
},
{
"value": "after",
"label": "After"
}
]
},
"label": "Position"
},
{
"default_value": ".collection--full-width",
"name": "element",
"field_type": "selector",
"options": null,
"label": "Element"
},
{
"default_value": 3,
"name": "displaynum",
"field_type": "number",
"options": null,
"label": "Quantity to show"
},
{
"default_value": "100px",
"name": "tileWidth",
"field_type": "text",
"options": null,
"label": "Tile Width"
}
],
"description": "",
"options": {
"html": "<div id=\"optimizely-extension-{{ extension.$instance }}\" class=\"optly-shopping-cart-summary\">\n <h4 class=\"optly-cart-heading\">{{ extension.heading }}{{#cart.item_count}} ({{cart.item_count}}){{/cart.item_count}}</h4>\n <div>\n <span class=\"optly-cart-subtotal\">Subtotal: ${{cartTotal}}</span> <span><a class=\"optly-cart-checkout-link\" href=\"/checkout\">Checkout now</a></span>\n </div>\n <div>\n {{#items}}\n <div class=\"optly-cart-tile\">\n <a href=\"{{url}}\">\n <div><img src=\"{{image}}\" /></div>\n <div class=\"optly-cart-product-name\">{{title}}</div>\n </a>\n </div>\n {{/items}}\n {{#showRemaining}}{{remaining}} more in cart{{/showRemaining}}\n </div>\n <div style=\"clear: both;\"></div>\n</div>",
"css": ".optly-shopping-cart-summary {\n display: table; \n margin: 0 auto;\n}\n\n.optly-cart-heading {\n margin-bottom: 0; \n padding-bottom: 0; \n}\n\n.optly-cart-subtotal {\n font-size: 9pt; \n}\n\n.optly-cart-checkout-link {\n font-size: 9pt; \n font-weight: bold; \n}\n\n.optly-cart-tile {\n width: 150px; \n float: left; \n margin: 5px;\n}\n\n.optly-cart-tile img {\n max-width: 100%;\n}\n\n.optly-cart-product-name {\n font-size: 10pt;\n}",
"apply_js": "var debugCartData = {\n \"token\":\"2d44711838a06bb63d27c5fc906b6abd\",\n \"note\":null,\n \"attributes\":{\n \"nogin_sid\":\"clqe04sv000003b6k3iyz7ira\",\n \"ShoppingGives Donation Tracking ID\":\"a87187b091384266a0d5d9dc1670f675\",\n \"smart_tags\":\"note::42834604458191::Extra 25% Off Sitewide - Priced as Marked::#000000::#ffffff::none::rgba(0,0,0,0)::0::0::-1::-1::0::0::0\"\n },\n \"original_total_price\":4500,\n \"total_price\":4500,\n \"total_discount\":0,\n \"total_weight\":0.0,\n \"item_count\":1,\n \"items\":[\n {\n \"id\":42834604458191,\n \"properties\":{\n \"persistent_note_private\":\"Extra 25% Off Sitewide - Priced as Marked\"\n },\n \"quantity\":1,\n \"variant_id\":42834604458191,\n \"key\":\"42834604458191:e8dca542164dc6d3e1bb258a22d70926\",\n \"title\":\"Striped Scarf with Sherpa-Lined Beanie Set - OLIVE \\/ ONE SIZE\",\n \"price\":4500,\n \"original_price\":4500,\n \"discounted_price\":4500,\n \"line_price\":4500,\n \"original_line_price\":4500,\n \"total_discount\":0,\n \"discounts\":[],\n \"sku\":\"45KC06H003-OLIVE-ONE-SIZE\",\n \"grams\":0,\n \"vendor\":\"RANDA ACCESSORIES LEATHER\",\n \"taxable\":true,\n \"product_id\":7204127736015,\n \"product_has_only_default_variant\":false,\n \"gift_card\":false,\n \"final_price\":4500,\n \"final_line_price\":4500,\n \"url\":\"\\/products\\/striped-scarf-and-beanie-set-with-sherpa-lining-45kc06h003-olive?variant=42834604458191\",\n \"featured_image\":{\n \"aspect_ratio\":0.813,\n \"alt\":\"OLIVE\",\n \"height\":1500,\n \"url\":\"https:\\/\\/cdn.shopify.com\\/s\\/files\\/1\\/0571\\/5122\\/6063\\/files\\/45kc06h003_olive_1.jpg?v=1692199680\",\n \"width\":1220\n },\n \"image\":\"https:\\/\\/cdn.shopify.com\\/s\\/files\\/1\\/0571\\/5122\\/6063\\/files\\/45kc06h003_olive_1.jpg?v=1692199680\",\n \"handle\":\"striped-scarf-and-beanie-set-with-sherpa-lining-45kc06h003-olive\",\n \"requires_shipping\":true,\n \"product_type\":\"mens cold weather\",\n \"product_title\":\"Striped Scarf with Sherpa-Lined Beanie Set\",\n \"product_description\":\"IT'S ALL IN THE DETAILS\\n\\nMen's scarf and beanie set\\n\\nTri-color knit scarf featuring embossed logo\\nBeanie features flat rubber logo patch\\nSherpa-lined beanie\\n100% acrylic\\nDry clean only\\n\\nImported\\n\",\n \"variant_title\":\"OLIVE \\/ ONE SIZE\",\n \"variant_options\":[\"OLIVE\",\"ONE SIZE\"],\n \"options_with_values\":[\n {\n \"name\":\"COLOR\",\n \"value\":\"OLIVE\"\n },{\n \"name\":\"SIZE\",\n \"value\":\"ONE SIZE\"\n }],\n \"line_level_discount_allocations\":[],\n \"line_level_total_discount\":0,\n \"quantity_rule\":{\n \"min\":1,\n \"max\":null,\n \"increment\":1\n },\n \"has_components\":false\n }],\n \"requires_shipping\":true,\n \"currency\":\"USD\",\n \"items_subtotal_price\":4500,\n \"cart_level_discount_applications\":[]};\n\nvar debug=true;\n\n/*\n * Editor now supports ES6 compliant code. Note that adding ES6\n * specific code to an experiment will break for users running\n * ES5-only browsers as code entered is not transpiled down to ES5.\n */\n\n const utils = window.optimizely.get('utils');\n\n utils.waitForElement(extension.element)\n .then(function(elem) {\n if(!debug){\n var cartData = {};\n fetch('./cart.json')\n .then((response) => response.json())\n .then((json) => {\n cartData = json;\n renderCartData(cartData, elem);\n });\n } else {\n renderCartData(debugCartData, elem);\n }\n });\n\nfunction renderCartData(cartData, elem){\n console.log('Cart: ', cartData);\n if(cartData.item_count > 0){\n var html = widget.$render({\n extension: extension, \n cart: cartData, \n cartTotal: (cartData.total_price / 100), \n items: cartData.items.slice(0, extension.displaynum), \n remaining: cartData.items.length - extension.displaynum || null,\n showRemaining: cartData.items.length > extension.displaynum\n });\n console.log(html);\n if(extension.position == 'before') {\n elem.insertAdjacentHTML('beforebegin', html);\n } else {\n elem.insertAdjacentHTML('afterend', html);\n }\n } else {\n //\n console.warn('Failed to fetch cart data.');\n }\n}\n",
"undo_js": "/*\n * Editor now supports ES6 compliant code. Note that adding ES6\n * specific code to an experiment will break for users running\n * ES5-only browsers as code entered is not transpiled down to ES5.\n */\n \n const extensionElement = document.getElementById('optimizely-extension-' + extension.$instance);\n if (extensionElement) {\n extensionElement.parentElement.removeChild(extensionElement);\n }\n"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment