dklear Posted June 11, 2020 Share Posted June 11, 2020 I was trying to add a "Go To Cart" button below the default "Add To Cart" button. I was able to inject another element with jquery like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $("<a class='btn btn--border theme-btn--primary-inverse' href='/cart/'>Go to Cart</a>").insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script> But of course it doesn't get all the button styling. So I tried to add div parents to match other buttons on the site that look like this: <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1590159860790_33264"> <div class="sqs-block-content" id="yui_3_17_2_1_1591844141919_110"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1591844141919_109"> <a href="/cart" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Go To Cart</a> </div> </div> </div> However, when I was nesting the "a" element, all the divs and the element within disappear. This was because I was not consistent using ' and " to define my strings. The following code works for me. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="large"><a class="sqs-block-button-element--large sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script> Would still be interested in the best place for documentation for 7.1 site wide css styles. I guess everyone just rips it from what gets served on their site? Thank you, -Dean Fix for order swapping in mobile If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button. There's probably a better way to query for this and insert it, but it doesn't seem to change much. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button" style="-webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; -webkit-order:4; order:4;"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" style="margin: 0 auto !important; width: 70% !important"><a class="sqs-block-button-element--medium sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script> Link to comment
dklear Posted June 11, 2020 Author Share Posted June 11, 2020 Issue was incorrectly quoting the inserted div elements. Link to comment
midwicket Posted August 13, 2020 Share Posted August 13, 2020 On 6/11/2020 at 11:34 AM, dklear said: I was trying to add a "Go To Cart" button below the default "Add To Cart" button. I was able to inject another element with jquery like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $("<a class='btn btn--border theme-btn--primary-inverse' href='/cart/'>Go to Cart</a>").insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script> But of course it doesn't get all the button styling. So I tried to add div parents to match other buttons on the site that look like this: <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1590159860790_33264"> <div class="sqs-block-content" id="yui_3_17_2_1_1591844141919_110"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1591844141919_109"> <a href="/cart" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Go To Cart</a> </div> </div> </div> However, when I was nesting the "a" element, all the divs and the element within disappear. This was because I was not consistent using ' and " to define my strings. The following code works for me. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="large"><a class="sqs-block-button-element--large sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script> Would still be interested in the best place for documentation for 7.1 site wide css styles. I guess everyone just rips it from what gets served on their site? Thank you, -Dean Fix for order swapping in mobile If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button. There's probably a better way to query for this and insert it, but it doesn't seem to change much. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('<div class="sqs-block button-block sqs-block-button" style="-webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; -webkit-order:4; order:4;"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" style="margin: 0 auto !important; width: 70% !important"><a class="sqs-block-button-element--medium sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper'); }); </script> Hi Dean, thank you for this. It worked on 7.1 . Only issue is that the Go to Cart is above the Add to Cart in mobile view. I did not understand your comment "If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button." Could you pls help on what needs to be done to correct this? Link to comment
tuanphan Posted August 17, 2020 Share Posted August 17, 2020 On 8/13/2020 at 7:49 AM, midwicket said: Hi Dean, thank you for this. It worked on 7.1 . Only issue is that the Go to Cart is above the Add to Cart in mobile view. I did not understand your comment "If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button." Could you pls help on what needs to be done to correct this? Can you share link to product? We can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
midwicket Posted August 19, 2020 Share Posted August 19, 2020 On 8/17/2020 at 5:47 PM, tuanphan said: Can you share link to product? We can check easier. Thanks Tuanphan, this is solved. I figured out that this is the ordering 1,2,3,4 of the various items in the first section of product (below title) and was able to get it done. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.