Display Progress Map in product tab

Support
#1

Hi,

I have added a Map with the Progress Map to a Woocommerce product but the map is not displayed.
It’s added to the description tab on this page: http://experiencetanzania.se/produkt/package-1/

I noticed that when I add the map also to the short description at the same time, both maps are displayed but keep loading without working.

I have the same map displayed here and it works fine:
http://experiencetanzania.se/customize-your-trip/

I contacted the author of the plugin and they had no clue and thought you might be able to help, see his reply:

Sorry for the delay but this is an odd issue. As you can see in this test page, the map works fine. I’ve been looking for the source of this problem in the previous days but in vain. I think the problem has somthing to do with the website encoding. The problem appears only when displaying the map inside the tabs. Some square brackets (e.g. my_object[i]) are strangely converted to special characters (e.g. my_object[i]).

Sorry but i really don’t have any clue and i’m not sure i’ll be able to provide a solution for this issue. If you can, please contact your theme support about this issue. The problem appears when the map is displayed inside the tabs, so they may have an idea.

Best regards,
Codespacing

Will you please try to help me?

Thank you

#2

Hello There,

Map inside a product tab is not recommended setup. Displaying the tab needs Jquery. Then adding content inside the tab that is using Jquery like Map causes conflict. Currently I can see this error:

Uncaught SyntaxError: Invalid or unexpected token

Probably pointing to a script related to MAP.

#3

Hi,

This is really bad news :frowning:
The map works fine in the product short description, could you please help me to make the page fullwidth so the product page would display the map in fullwidth rather than a smaller map on the side of the image?

You can see what it looks like now here: http://experiencetanzania.se/produkt/package-1/

Even better would be to replace the image with the map, and have the product options on the side of the map.

#4

Hi There,

To make the oage full width there two way to do this,
1- Woo template customization which is not recomonded as it may affect in theme update and also
2- CSS customization,
Please add this css to your theme option -> Global CSS

.woocommerce div.product .images,
.woocommerce div.product .summary
 {
  width: 100%; !important; 
}
.woocommerce-product-gallery__image a img {
   width: 100%
}

Hope this helps!

Thanks

#5

Hi,

Thank you, this is a step in the right direction!
I have made the page fullwidth now however I would like to have the top section in 2 columns, is there any way I can use cornerstone to edit the page? Right now I have to create this using the old shortcodes as seen below.


Thanks in advance!

#6

Hi There,

Thanks again for asking!

Cornerstone edit doesn’t work in woo-commerce pages. You can use old short-code and custom HTML to achieve this.
We are really sorry but further customization work is out of our theme support scope.
You can take a help from a developer to do the template customization work.

Thanks for understanding

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.