@nguyenmv2/buy-button
Version:
BuyButton.js allows merchants to build Shopify interfaces into any website
22 lines (21 loc) • 5.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var quantityTemplate = "<div class=\"{{data.classes.product.quantity}} {{data.quantityClass}}\" data-element=\"product.quantity\">\n {{#data.contents.quantityDecrement}}\n <button class=\"{{data.classes.product.quantityButton}} {{data.classes.product.quantityDecrement}}\" type=\"button\" data-element=\"product.quantityDecrement\"><span>-</span><span class=\"visuallyhidden\">Decrement</span></button>\n {{/data.contents.quantityDecrement}}\n {{#data.contents.quantityInput}}\n <input class=\"{{data.classes.product.quantityInput}}\" type=\"number\" min=\"0\" aria-label=\"Quantity\" value=\"{{data.selectedQuantity}}\" data-element=\"product.quantityInput\">\n {{/data.contents.quantityInput}}\n {{#data.contents.quantityIncrement}}\n <button class=\"{{data.classes.product.quantityButton}} {{data.classes.product.quantityIncrement}}\" type=\"button\" data-element=\"product.quantityIncrement\"><span>+</span><span class=\"visuallyhidden\">Increment</span></button>\n {{/data.contents.quantityIncrement}}\n </div>";
var buttonTemplate = '<div class="{{data.classes.product.buttonWrapper}}" data-element="product.buttonWrapper"><button {{#data.buttonDisabled}}disabled{{/data.buttonDisabled}} class="{{data.classes.product.button}} {{data.buttonClass}}" data-element="product.button">{{data.buttonText}}</button></div>';
var productTemplate = {
img: '{{#data.currentImage.srcLarge}}<div class="{{data.classes.product.imgWrapper}}" data-element="product.imgWrapper"><img alt="{{data.currentImage.altText}}" data-element="product.img" class="{{data.classes.product.img}}" src="{{data.currentImage.srcLarge}}" /></div>{{/data.currentImage.srcLarge}}',
imgWithCarousel: "<div class=\"{{data.classes.product.imgWrapper}}\" data-element=\"product.imageWrapper\">\n <div class=\"main-image-wrapper\">\n <button type=\"button\" class=\"carousel-button carousel-button--previous\">\n Left\n <img class=\"carousel-button-arrow\" src=\"//sdks.shopifycdn.com/buy-button/latest/arrow.svg\" alt=\"Carousel Arrow\"/>\n </button>\n <img class=\"{{data.classes.product.img}}\" alt=\"{{data.currentImage.altText}}\" src=\"{{data.currentImage.src}}\" data-element=\"product.img\" />\n <button type=\"button\" class=\"carousel-button carousel-button--next\">\n Right\n <img class=\"carousel-button-arrow\" src=\"//sdks.shopifycdn.com/buy-button/latest/arrow.svg\" alt=\"Carousel Arrow\"/>\n </button>\n </div>\n <div class=\"{{data.classes.product.carousel}}\">\n {{#data.carouselImages}}\n <a data-element=\"product.carouselitem\" aria-label=\"{{altText}}\" href=\"{{src}}\" class=\"{{data.classes.product.carouselItem}} {{#isSelected}} {{data.classes.product.carouselItemSelected}} {{/isSelected}}\" data-image-id=\"{{id}}\" style=\"background-image: url({{carouselSrc}})\"></a>\n {{/data.carouselImages}}\n </div>\n </div>",
title: '<h1 class="{{data.classes.product.title}}" data-element="product.title">{{data.title}}</h1>',
variantTitle: '{{#data.hasVariants}}<h2 class="{{data.classes.product.variantTitle}}" data-element="product.variantTitle">{{data.selectedVariant.title}}</h2>{{/data.hasVariants}}',
options: '{{#data.hasVariants}}<div class="{{data.classes.product.options}}" data-element="product.options">{{{data.optionsHtml}}}</div>{{/data.hasVariants}}',
price: "<div class=\"{{data.classes.product.prices}}\" data-element=\"product.prices\">\n {{#data.selectedVariant}}\n <span class=\"visuallyhidden\">{{data.priceAccessibilityLabel}} </span>\n <span class=\"{{data.classes.product.price}} {{data.priceClass}}\" data-element=\"product.price\">{{data.formattedPrice}}</span>\n {{#data.hasCompareAtPrice}}\n <span class=\"visuallyhidden\">{{data.compareAtPriceAccessibilityLabel}} </span>\n <span class=\"{{data.classes.product.compareAt}}\" data-element=\"product.compareAt\">{{data.formattedCompareAtPrice}}</span>\n {{/data.hasCompareAtPrice}}\n {{#data.showUnitPrice}}\n <div class=\"{{data.classes.product.unitPrice}}\" data-element=\"product.unitPrice\">\n <span class=\"visuallyhidden\">{{data.text.unitPriceAccessibilityLabel}}</span>\n {{data.formattedUnitPrice}}<span aria-hidden=\"true\">/</span><span class=\"visuallyhidden\"> {{data.text.unitPriceAccessibilitySeparator}} </span>{{data.formattedUnitPriceBaseUnit}}\n </div>\n {{/data.showUnitPrice}}\n {{/data.selectedVariant}}\n </div>",
description: '<div class="{{data.classes.product.description}}" data-element="product.description">{{{data.descriptionHtml}}}</div>',
button: buttonTemplate,
quantity: quantityTemplate,
buttonWithQuantity: "<div class=\"{{data.classes.product.buttonWithQuantity}}\" data-element=\"product.buttonWithQuantity\">".concat(quantityTemplate).concat(buttonTemplate, "</div>")
};
var _default = productTemplate;
exports.default = _default;