Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reorder Product details + Additional information (Markdown) on Mobile


bbarinaga

Question

Site URL: https://mistoa.mx/lavabos/p/lavabo-brava

web: https://mistoa.mx/lavabos/p/lavabo-brava

pasword: 1234

 

Hello,

I hope someone can help me.

I’ve managed to insert Additional information in Product’s main section using markdown and the following codes:

HEADER

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

 

FOOTER

<script>

  $(document).ready(function() { 

$('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');

});

</script>

 

It looks great on desktop, however, it’s all messed up on mobile (please see screenshot) and I haven’t been able to change the order.

I’d like to have the same order on mobile:

 

1) Name

2) Price

3) Product Description

4) Additional Info (Mark

5) Color, Quantity (Ideally on the same line)

6) Add to cart

 

I appreciate any help!!

 

mobile.png.5d3a6509a558edeac43c7d87cee568e8.png

 

 

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You are on the right lines I think.   Take a look at you css @ line 14(ish): .ProductItem-details .ProductItem-product-price {     -webkit-box-ordinal-group: 1;     -moz-box-ordinal-gro

Happy to help

Posted Images

3 answers to this question

Recommended Posts

  • 0

You are on the right lines I think.

 

Take a look at you css @ line 14(ish):

.ProductItem-details .ProductItem-product-price {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    margin-bottom: 25px;
    display: block;
}

changing above code to this (i.e. removing the order declaration (and it's browser vendor prefixes)):

.ProductItem-details .ProductItem-product-price {
    margin-bottom: 25px;
    display: block;
}
The result is this:

image.thumb.png.f8e64d551abba0c1555db3c054e25275.png

 

The next thing to do is the re-ordering of the next 3 sections, SELLADO, PIGMENTACIÓN and ENVÍO

Having looked at your html code I can see that there are 3 <h4> each followed by hidden <p> and <ul> and <li> tags with additional info. (Very nice accordian effect BTW 🙂 ).

In order to change the order of the <h4> tags and it's subsequent other tags, I would suggest wrapping each set of <h4>,<p><ul> and <li> tags in a div.

However I just tried this and it breaks the accordian, though if you are happy to tweak the jquery it should work.

Alternatively I suppose give an orer value to each <h4>, <p> etc within the parent <div class="sqs-block-content"> tag but this seems somewhat laborious 😞

Good luck!!

 

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...