Shopify / buy-button-js

BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website.
http://shopify.github.io/buy-button-js/
MIT License
242 stars 114 forks source link

Buy Button imgwithCarousel zoom feature? #631

Open sc1zzle opened 5 years ago

sc1zzle commented 5 years ago

Has anyone figured out a way to add zoom to the product details modal carousel for a shopify buy button? I have a WP site of a client who is requesting this customization to the buy button.

sc1zzle commented 5 years ago

`"modalProduct": { "contents": { "img": false, "imgWithCarousel": true, "variantTitle": false, "buttonWithQuantity": true, "button": false, "quantity": false },

  "templates": {
  "imgWithCarousel": '<div class="{{data.classes.product.imgWrapper}}" data-element="product.imageWrapper"><div class="main-image-wrapper"><button type="button" class="carousel-button carousel-button--previous">Left<img class="carousel-button-arrow" src="//sdks.shopifycdn.com/buy-button/latest/arrow.svg" alt="Carousel Arrow"/></button><img class="{{data.classes.product.img}}" src="{{data.currentImage.srcLarge}}" data-element="product.img" /><button type="button" class="carousel-button carousel-button--next">Right<img class="carousel-button-arrow" src="//sdks.shopifycdn.com/buy-button/latest/arrow.svg" alt="Carousel Arrow"/></button></div><div class="{{data.classes.product.carousel}}">{{#data.carouselImages}}<a data-element="product.carouselitem" href="{{src}}" class="{{data.classes.product.carouselItem}} {{#isSelected}} {{data.classes.product.carouselItemSelected}} {{/isSelected}}" data-image-id="{{id}}" style="background-image: url({{carouselSrc}})"></a>{{/data.carouselImages}}</div></div>'    
},  
"styles": {
  "product": {
    "@media (min-width: 601px)": {
      "max-width": "100%",
      "margin-left": "0px",
      "margin-bottom": "0px",          
    }
  },
  "button": {
    "background-color": "#36cbe0",
    "font-family": "Lato, sans-serif",
    "padding-left": "30px",
    "padding-right": "30px",
    ":hover": {
      "background-color": "#31b7ca"
    },`
jb2sprint commented 4 years ago

Been trying to figure out how to do this very thing for the last week and having no luck. I know this has been dormant since August but just curious if there's been any headway in figuring out a work-around to this?

maltbee commented 4 years ago

I also would like to see how to do this in the Buy Button for the Collections. The photos in the item preview are too small and my client would like them to zoom when hovered over. Is this possible? I am new to this

jjaun commented 2 years ago

A zoom / lighbox option on the carousel image would be great as the image is just to small to see all details of a product.