Buy button Js: discount code as url query string when checkout url generated and go to shopify

[deepakdaffodil]

Is it possible to embed a discount into the Checkout button such that when the user clicks on it and redirects to Shopify the discount code is automatically filled in?

On checkout button this message is displayed "Shipping and discount codes are added at checkout."

[supaht]

I would like to do this as well. @deepakdaffodil Did you ever figure out if this is possible?

[deepakdaffodil]

Yes, Only way is to customize library and add discount as query string. cc: @supaht

[supaht]

thanks, @deepakdaffodil. Is there a recommended way to modify the cart weburl to add queries?

[AnabelleRajotte]

I needed to add a local parameter to the checkout URL and I manage to do it. Here's what I did. On the cart object, I added an event :

events: {
    afterInit: (cart) => {
        cart.onCheckout = () => {
            const checkoutUrl = cart.model.webUrl + '&locale=en';
            // we dynamically change the checkout function.
            cart.checkout.open(checkoutUrl);
        };
    },
},

But how do you plan to get your promo code back in checkout if you can not inject any javascript ?

[m00n22-zz]

Sorry for the hijack but @AnabelleRajotte could you let me how you added the code. I'm trying the same, but not sure how to do it.

[AnabelleRajotte]

@m00n22 Here's how I added the code. Let me know if it help.

ui.createComponent('product', {
    id: 1234567,
    options: {
        cart: {
            events: {
                afterInit: (cart) => {
                    cart.onCheckout = () => {
                        const checkoutUrl = cart.model.webUrl + '&locale='&locale=en';
                        cart.checkout.open(checkoutUrl);
                    };
                },
            },
        }
    },
});

[m00n22-zz]

@AnabelleRajotte thanks for your reply. I tried the following before you replied and it seemed to work:

(Sorry can't find the pre markup)

 "cart": {
    "styles": {
      "button": {
        ":hover": {
          "background-color": "#2b2b2b"
        },
        "background-color": "#191919",
        ":focus": {
          "background-color": "#2b2b2b"
        },
        "border-radius": "0px"
      },
      "title": {
        "color": "#191919"
      },
      "header": {
        "color": "#191919"
      },
      "lineItems": {
        "color": "#191919"
      },
      "subtotalText": {
        "color": "#191919"
      },
      "subtotal": {
        "color": "#191919"
      },
      "notice": {
        "color": "#191919"
      },
      "currency": {
        "color": "#191919"
      },
      "close": {
        "color": "#191919",
        ":hover": {
          "color": "#191919"
        }
      },
      "empty": {
        "color": "#191919"
      },
      "noteDescription": {
        "color": "#191919"
      },
      "discountText": {
        "color": "#191919"
      },
      "discountIcon": {
        "fill": "#191919"
      },
      "discountAmount": {
        "color": "#191919"
      }
    },
    "text": {
      "title": "Winkelmand",
      "empty": "Uw winkelwagen is leeg.",
      "notice": "Verzend- en kortingscodes worden toegevoegd bij het afrekenen.",
      "total": "Subtotaal",
      "button": "Bestellen"
    },
      events: {
    afterInit: (cart) => {
        cart.onCheckout = () => {
            const checkoutUrl = cart.model.webUrl + '&locale=en';
            // we dynamically change the checkout function.
            cart.checkout.open(checkoutUrl);
        };
    },
},

[AnabelleRajotte]

@m00n22 Awesome ! Happy to help :)

[m00n22-zz]

@AnabelleRajotte thanks again. One last thing, can you use/append the &locale=NL paramater to a customer information and use it to send Shopify's notification emails in a particular language?

[AnabelleRajotte]

@m00n22 In my end, I used Langify to manage languages in the shop that's why I needed to add a locale to the url. By default, if the customer goes to the checkout with a locale, it's memorized. In your shop settings, you can customize the emails, and with Langify we can add this piece of code everywhere to choose the right content to send.

{% case attributes.language %}
   {% when 'ly82231' %} 
       Commande {{name}} confirmée 
   {% else %} 
       Order {{name}} confirmed 
{% endcase %}

where ly82231 represent your language id. Everything is well explaned in the Langify documentation.

I hope it helps !

[m00n22-zz]

Thanks @AnabelleRajotte for the quick responses and your time for commenting on my questions. Seeing that we have a Wordpress site with a Shopify Buy Button integration (so we do not have a Shopify storefront) we do not have Langify/Weglot as app installed and I was hoping I did not need it with the use of &locale=??. But I guess I do need a app to have the language memorised and appended to the order/customer.

[AnabelleRajotte]

@m00n22 You're welcome ! :) Sadly yes. I had the same issue, a Shopify Buy Button without a Shopify storefront. Shopify don't support multilangues yet, so we don't have any choice but to use an App for that.

[m00n22-zz]

@AnabelleRajotte hi 👋🏻 Me again 😁.

Do you have an idea if it’s possible to set a custom attribute (language) on checkout and set it to the customer (Lang=nl).

Copy from other source:

It is important that you add the locale parameter to the action attribute and that the form method is POST.

<input type="hidden" name="attributes[Locale]" value="de">

In addition I added a custom cart attribute with the name Locale that is passed through the checkout and shows up on the order detail page.

I’m desperate to find a way to have it work with buy button and without the need of a translation app.

[AnabelleRajotte]

@m00n22 Hi, I don't think so. The only way to edit the checkout liquid template is via a Shopify Plus account.

[thenovacreator]

For everyone wondering how to add a promo code before checkout. This is how to do it.

"events": {
    afterInit: (cart) => {
        cart.onCheckout = () => {
            const checkoutUrl = cart.model.webUrl + '&discount=INSERT_CODE_HERE';
            // we dynamically change the checkout function.
            cart.checkout.open(checkoutUrl);
        };
    },
},

[seanmpage]

Is there any way of doing this when the Buy now button takes you strait to the checkout on your store. I've tried to put the code suggested in here but the discount code is never added to the url.

[adrach]

@thenovacreator 's snippet works for the case when buttonDestination !== 'checkout' if you want to go straight to checkout with the checkout code, one can override buttonDestination to be a function and here a snippet I put together

    const discountCode = 'MYCODE';
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: productId,
        ...
        options: {
          product: {
            ...
            buttonDestination: function(that) {
              // based on onButtonClick => buttonDestination === 'checkout'
              // https://github.com/Shopify/buy-button-js/blob/master/src/components/product.js#L647
              that._userEvent('openCheckout');
              that.props.tracker.track('Direct Checkout', {});
              let checkoutWindow;
              if (that.config.cart.popup) {
                checkoutWindow = window.open('', 'checkout');
              } else {
                checkoutWindow = window;
              }
              const input = {
                lineItems: [
                  {
                    variantId: that.selectedVariant.id,
                    quantity: that.selectedQuantity,
                  },
                ],
              };

              that.props.client.checkout.create(input).then((checkout) => {
                let suffix = '&';
                if (checkout.webUrl.indexOf('?') === -1) suffix = '?';
                const checkoutUrl = `${checkout.webUrl}${suffix}discount=${discountCode}`;
                checkoutWindow.location = checkoutUrl;
              });

@seanmpage try this ⬆️