9 Replies Latest reply on Nov 8, 2017 9:13 PM by rcankney

    Individual Product Page CSS Issue

    rcankney Level 1

      I am having an interesting problem..  I recently updated the template for my clients BC e-commerce store. Every page has been skinned, except for the lower level pages, such as the individual product pages. The catalogs display correctly, but as soon as an item is chosen the next page seems to be having trouble finding the CSS. This happens with the store and the blog. If you click on an individual story on the blog to see its specific page it is having the same CSS issue.

       

      I have tried everything I can think of. This is also my first time using BC for this type of build. All I did was follow what had been done originally.

       

      Any help would be appreciated and links will be included below.

       

      Main Page http://www.sunkingbrewing.com/apparel

      Individual Product http://www.sunkingbrewing.com/apparel/bagofmystery

       

      Main Page http://www.sunkingbrewing.com/blog

      Individual Post http://www.sunkingbrewing.com/blog/what-do-you-do-with-all-of-that-halloween-candy

        • 1. Re: Individual Product Page CSS Issue
          Productive I.T. Level 2

          Here are a few things to check on.

           

          What's in your Module Templates for Blog Detail Layout? In the Manage tab, go to Module Templates > Blog Layouts > Blog Post Details Layout.

           

          What's in your Module Templates for Products Overall? In the Manage tab, go to Module Templates > Online Shop Layouts > Overall Layout.

           

          What's in your Module Templates for Individual Product Large? In the Manage tab, go to Module Templates > Online Shop Layouts > Individual Product - Large.

          • 2. Re: Individual Product Page CSS Issue
            rcankney Level 1

            Individual Large Code:

             

            <div class="shop-product-large clear">

                <div class="details">

                    <h1>{tag_name}</h1>

                    <ul>

                        <li class="price"><strong>{tag_saleprice}</strong> </li>

                        <li class="price"><strong>FREE SHIPPING ON ALL ORDERS</strong> </li>

                        <li class="price"><strong>Please allow <strong><p style="display: inline !important;">2-3 business days for order processing, and 3-10 business days for shipping, depending on order destination.</p></strong>

                            <br /> </strong>

                        </li>

                        <li class="price"><strong><ul style="display: inline !important;"><li style="display: inline !important;"><strong>{tag_attributes}</strong> </li>

                    </ul>

                    </strong>

                    </li>

                    <li class="quantity">{tag_addtocartinputfield} {tag_addtocart,<img src="/CatalystImages/shop_addtocart.png">}</li>

                    </ul>

                    <div class="description">{tag_description}</div>

                </div>

                <div class="image"> {tag_largeimage}

                    <div class="poplets">{tag_poplets}</div>

                </div>

            </div>

            <div class="comment-form">

                <h5> </h5>

                <form name="catratingform2343" onsubmit="return checkWholeForm2343(this)" method="post" action="/RatingProcess.aspx?OID={module_oid}&amp;OTYPE={module_otype}">

                    <div class="form"> </div>

                    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

                    <script type="text/javascript">

                        //<![CDATA[

                        function checkWholeForm2343(theForm) {

                                var why = "";

                                if (theForm.EmailAddress)

                                    if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);

                                if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below");

                                if (why != "") {

                                    alert(why);

                                    return false;

                                }

                                theForm.submit();

                                return false;

                            }

                            //]]>

                    </script>

                </form>

            </div>

             

            Blog Detail Code:

             

            <div class="blog-post">

            <h2 class="post-title"> {tag_blogposttitle_nolink} </h2>

            <div class="post-details">{tag_blogpostdate} </div>

            <div class="post-body"> {tag_blogpostbody}</div>

            <div class="post-body">  <br />

            </div>

            <div class="post-body">

            <div class="links"> <a href="#comments">Comments ({tag_commentcount})</a> | <a href="#trackbacks">Trackbacks ({tag_trackbackcount})</a> | {tag_permalink}</div>

            | <a href="https://twitter.com/share" class="twitter-share-button" data-via="sunkingbrewing">Tweet</a>

            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE lementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.j s';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

            <div class="links"><br />

            </div>

            </div>

            <!-- BEGIN #comments -->

            <a name="comments"></a>

            <div class="comment-list">

            <h5> Comments</h5>

            {tag_commentspaged}

            <hr />

            <form onsubmit="return checkWholeForm(this)" action="/RatingProcess.aspx?OID={tag_blogpostid}&amp;OTYPE={tag_blogposttype}" method="post">

                <h5> Post a Comment</h5>

                <div class="form">

                <div class="item">

                <label> Name (optional)</label>

                <br />

                <input maxlength="255" name="fullname" class="cat_textbox_small" />

                </div>

                <div class="item">

                <label> Website (optional)</label>

                <br />

                <input maxlength="255" name="website" class="cat_textbox_small" />

                </div>

                <div class="item">

                <label> Email Address (optional)</label>

                <br />

                <input maxlength="255" name="emailaddress" class="cat_textbox_small" />

                </div>

                <div class="item">

                <label> Enter Word Verification in box below</label>

                <br />

                {module_captchav2}

                </div>

                <div class="item">

                <label> Your comment</label>

                <br />

                <textarea name="Feedback" class="cat_listbox_small"></textarea>

                </div>

                <div class="item">

                <input type="submit" value="Submit" />

                </div>

                </div>

                <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

                <script type="text/javascript">

                  //<![CDATA[

                  function checkWholeForm(theForm) {

                    var why = "";

                    if (theForm.EmailAddress) if (theForm.EmailAddress.value.length > 0) why += checkEmail(theForm.EmailAddress.value);

                    if (theForm.CaptchaV2) why += isEmpty(theForm.CaptchaV2.value, "Enter Word Verification in box below");

                    if (why != "") { alert(why); return false; }

                    return true;

                  }

                  //]]>

                  </script>

            </form>

            </div>

            <!-- END #comments -->

            <!-- BEGIN #trackbacks -->

            <a name="trackbacks"></a>

            <div class="trackbacks">

            <dl>

                <dt>Trackback Link</dt>

                <dd> {tag_trackbacklink}</dd>

                <dt>Trackbacks</dt>

                <dd> {tag_trackbacklist}</dd>

            </dl>

            </div>

            <!-- END #trackbacks -->

            </div>

            <!-- END .blog-post -->

            • 3. Re: Individual Product Page CSS Issue
              Productive I.T. Level 2

              When you go to Modules > Blogs > [Name of blog, if you have more than one.] > Blog Details , is the correct page template selected?

               

              screenshot.jpg

              • 4. Re: Individual Product Page CSS Issue
                rcankney Level 1

                Yes. If you look at the source code in your browser all the correct code is in place. But for some odd reason, it won't pull the CSS from the template.

                Capture.JPG

                • 5. Re: Individual Product Page CSS Issue
                  Liam Dilley Adobe Community Professional & MVP

                  Ignore all of the above.

                  With BC. Any time you have a file be it image, JS or CSS for example you need to have a forward slash at the start to tell BC to read from the root.

                   

                  You have:

                  <link rel="stylesheet" type="text/css" href="css/site_global.css?crc=4016592342" />

                   

                  BC will try and find a file for that inside the catalogue you are in (folder).

                  You need to do it like this:

                  <link rel="stylesheet" type="text/css" href="/css/site_global.css?crc=4016592342" />

                  • 6. Re: Individual Product Page CSS Issue
                    rcankney Level 1

                    I had read something similar to this, but every time I have changed that it makes the page go completely blank. Which leaves me even more confused as to where the error is occurring.

                     

                    I left it up so you can see it and make sure I am not making another error.

                    • 7. Re: Individual Product Page CSS Issue
                      Productive I.T. Level 2

                      But why is it working on one page, and not on the other? This thread is its own Bag of Mystery!

                       

                      I tried building my own version of the page, using absolute urls to the page assets. Just as the OP described, everything vanished.

                       

                      I'm seeing this error on http://www.sunkingbrewing.com/apparel/bagofmystery :

                       

                      Capture.PNG

                      • 8. Re: Individual Product Page CSS Issue
                        Liam Dilley Adobe Community Professional & MVP

                        BC does not produce that error. You have code in your site that does that from Muse.

                        Muse is a mess, for me I think it is one of the worst peaces of software I have seen, especially in terms of trying to make websites.


                        The code on that site is a mess for me, scripting and errors all over the place.

                        • 9. Re: Individual Product Page CSS Issue
                          rcankney Level 1

                          I ended up speaking with support for Adobe Bc. My whole problem was that I was not exporting the site directly from Muse to Bc. Instead, I was exporting and copying over using an FTP client

                           

                          Thanks for your attempts at helping me!

                          1 person found this helpful