Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    How to set 'Buy now' button along with Add to card button?

    Knowledge Base
    5
    26
    5434
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • admin
      admin last edited by

      @Zakir
      do you want to add this to the velocity theme?

      P 1 Reply Last reply Reply Quote 0
      • Z
        Zakir last edited by

        yes in velocity theme version 1.2 .

        1 Reply Last reply Reply Quote 0
        • Z
          Zakir last edited by

          or
          how to open 'checkout/cart' page in a model popup window once click on 'Add To cart' ?

          1 Reply Last reply Reply Quote 0
          • admin
            admin last edited by

            @Zakir
            you may use is_buy_now field in velocity which is already implemented for default theme here https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Shop/src/Resources/views/products/view.blade.php#L134

            Thanks

            1 Reply Last reply Reply Quote 0
            • Z
              Zakir last edited by

              Great Thanks.
              Can you please write me more details how to active that field , I can see its hidden field.

              1 Reply Last reply Reply Quote 0
              • Z
                Zakir last edited by

                @admin how to implement that in velocity ? is there configuration in Admin page or where to add that?

                1 Reply Last reply Reply Quote 0
                • D
                  deepak227 last edited by

                  @Zakir please go through the files packages\Webkul\Velocity\src\Resources\assets\js\UI\components\cart-list.vue and packages\Webkul\Velocity\src\Resources\assets\js\UI\components\modal.vue

                  These files will definitely work for you for pop up view.
                  Thank you

                  1 Reply Last reply Reply Quote 0
                  • P
                    parasbhadauria63 @admin last edited by

                    Hi @admin
                    I want to add a Buy Now button along with Add to Cart button for Velocity Theme.
                    Please help me out with how can I implement it.
                    Thanks

                    1 Reply Last reply Reply Quote 0
                    • V
                      Vaishali Agarwal last edited by

                      @parasbhadauria63
                      Buy now enable/disable has been implemented for both themes in master branch.
                      you can check the updates here https://github.com/bagisto/bagisto/issues/4321

                      P 1 Reply Last reply Reply Quote 0
                      • P
                        parasbhadauria63 @Vaishali Agarwal last edited by

                        Hi @Vaishali-Agarwal
                        Currently only add to cart button is active.
                        If buy now is implemented then can you tell me then how can I enable it for the velocity theme?
                        Thanks

                        1 Reply Last reply Reply Quote 0
                        • V
                          Vaishali Agarwal last edited by

                          @parasbhadauria63
                          May I know which bagisto version you are currently using?

                          P 1 Reply Last reply Reply Quote 1
                          • P
                            parasbhadauria63 @Vaishali Agarwal last edited by parasbhadauria63

                            @Vaishali-Agarwal
                            It is "v1.1.2"

                            1 Reply Last reply Reply Quote 0
                            • V
                              Vaishali Agarwal last edited by

                              @parasbhadauria63
                              I recommend you to upgrade your project with latest release v1.2.0.

                              Still you can implement buy now feature on your existing project as well, you just need to update all the changes as mention here https://github.com/bagisto/bagisto/commit/963191b3fc66188f630d0aa34f945b63efcfd48c

                              P 1 Reply Last reply Reply Quote 0
                              • P
                                parasbhadauria63 @Vaishali Agarwal last edited by

                                @Vaishali-Agarwal
                                Ok, How can I upgrade from 1.1.2 to 1.2.0 (latest version).
                                Can I upgrade it in one-click as mentioned in https://bagisto.com/en/how-to-update-bagisto-with-one-click/

                                1 Reply Last reply Reply Quote 0
                                • V
                                  Vaishali Agarwal last edited by

                                  @parasbhadauria63
                                  please check this guide if you want to upgrade to latest version https://devdocs.bagisto.com/1.x/introduction/upgrade_to_latest_bagisto.html

                                  you can't update this with one click update as you have an older version exist in which this feature is not available.

                                  P 1 Reply Last reply Reply Quote 0
                                  • P
                                    parasbhadauria63 @Vaishali Agarwal last edited by

                                    @Vaishali-Agarwal
                                    The latest version 1.2.0 is installed
                                    But still, I did not get the option to enable the Buy Now Button

                                    1 Reply Last reply Reply Quote 0
                                    • V
                                      Vaishali Agarwal last edited by

                                      @parasbhadauria63
                                      If you have successfully installed the latest version then to take the buy now updates you need to done the changes in the files as mention in below link
                                      https://github.com/bagisto/bagisto/commit/963191b3fc66188f630d0aa34f945b63efcfd48c

                                      P 1 Reply Last reply Reply Quote 0
                                      • P
                                        parasbhadauria63 @Vaishali Agarwal last edited by parasbhadauria63

                                        Hi @Vaishali-Agarwal
                                        I have made the changes as mentioned by you
                                        I have got the option from the backend as you can see in the screenshot.
                                        Buy Now Screenshot.png

                                        Buy Now button becomes visible only in the bliss theme.
                                        How to make it visible in the Velocity theme also???
                                        I am sharing some part of the product page source code below:

                                        <script type='text/javascript' src='https://unpkg.com/spritespin@4.1.0/release/spritespin.js'></script>
                                        
                                        <script type="text/x-template" id="product-view-template">
                                            <form
                                                method="POST"
                                                id="product-form"
                                                @click="onSubmit($event)"
                                                action="http://localhost/bagisto-new/public/checkout/cart/add/1">
                                        
                                                <input type="hidden" name="is_buy_now" v-model="is_buy_now">
                                        
                                                <slot v-if="slot"></slot>
                                        
                                                <div v-else>
                                                    <div class="spritespin"></div>
                                                </div>
                                        
                                            </form>
                                        </script>
                                        
                                        <script>
                                            Vue.component('product-view', {
                                                inject: ['$validator'],
                                                template: '#product-view-template',
                                                data: function () {
                                                    return {
                                                        slot: true,
                                                        is_buy_now: 0,
                                                    }
                                                },
                                        
                                                mounted: function () {
                                                    let currentProductId = 'wall-painting';
                                                    let existingViewed = window.localStorage.getItem('recentlyViewed');
                                        
                                                    if (! existingViewed) {
                                                        existingViewed = [];
                                                    } else {
                                                        existingViewed = JSON.parse(existingViewed);
                                                    }
                                        
                                                    if (existingViewed.indexOf(currentProductId) == -1) {
                                                        existingViewed.push(currentProductId);
                                        
                                                        if (existingViewed.length > 3)
                                                            existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
                                        
                                                        window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));
                                                    } else {
                                                        var uniqueNames = [];
                                        
                                                        $.each(existingViewed, function(i, el){
                                                            if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
                                                        });
                                        
                                                        uniqueNames.push(currentProductId);
                                        
                                                        uniqueNames.splice(uniqueNames.indexOf(currentProductId), 1);
                                        
                                                        window.localStorage.setItem('recentlyViewed', JSON.stringify(uniqueNames));
                                                    }
                                                },
                                        
                                                methods: {
                                                    onSubmit: function(event) {
                                                        if (event.target.getAttribute('type') != 'submit')
                                                            return;
                                        
                                                        event.preventDefault();
                                        
                                                        this.$validator.validateAll().then(result => {
                                                            if (result) {
                                                                this.is_buy_now = event.target.classList.contains('buynow') ? 1 : 0;
                                        
                                                                setTimeout(function() {
                                                                    document.getElementById('product-form').submit();
                                                                }, 0);
                                                            }
                                                        });
                                                    },
                                                }
                                            });
                                        
                                            window.onload = function() {
                                                var thumbList = document.getElementsByClassName('thumb-list')[0];
                                                var thumbFrame = document.getElementsByClassName('thumb-frame');
                                                var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
                                        
                                                if (thumbList && productHeroImage) {
                                                    for (let i=0; i < thumbFrame.length ; i++) {
                                                        thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
                                                        thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
                                                    }
                                        
                                                    if (screen.width > 720) {
                                                        thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
                                                        thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
                                                        thumbList.style.height = productHeroImage.offsetHeight + "px";
                                                    }
                                                }
                                        
                                                window.onresize = function() {
                                                    if (thumbList && productHeroImage) {
                                        
                                                        for(let i=0; i < thumbFrame.length; i++) {
                                                            thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
                                                            thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
                                                        }
                                        
                                                        if (screen.width > 720) {
                                                            thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
                                                            thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
                                                            thumbList.style.height = productHeroImage.offsetHeight + "px";
                                                        }
                                                    }
                                                }
                                            };
                                        </script>
                                        
                                        1 Reply Last reply Reply Quote 0
                                        • V
                                          Vaishali Agarwal last edited by

                                          @parasbhadauria63
                                          please check once have you added the changes in velocity package as mention in the PR
                                          check these files & changes must be added into your project as well https://prnt.sc/x3wumb

                                          P 1 Reply Last reply Reply Quote 0
                                          • P
                                            parasbhadauria63 @Vaishali Agarwal last edited by

                                            Hi @Vaishali-Agarwal
                                            I have already made the changes as mentioned above.
                                            But still Buy Now is not visible in the Velocity theme.
                                            Please help me out.
                                            Thanks

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post