Custom Catalog layout

[sleepingcatnz]

I have catalog & sub-catalog pages. I would like to have unique slideshows (that I have already set up) instead of product displayed on the catalog (menu) pages. The sub-catalog pages (sub-menus) can stay as-is, displaying product. I have gotten around it by creating pages with slideshows & using these for the catalog pages instead of the E-Commerce pages need to use E-Commerce catalog pages for the site hierarchy & bredcrumbs. Is this possible please? http://meluka.worldsecuresystems.com/livingroom-1

[thetrickster888]

OK-- here's an idea.  Why don't you take the slideshow you have for all your top-level catalogs and move them into content holders.  You should name the content holder exactly what the catalog name is... so move your slideshow for the BEDroom catalog to a content holder called "slider-BEDroom".  Then, in your overall shop layout, beneath the breadcrumbs and before the products you can insert your content holder but use the {tag_name} which will output the catalog name to call your content holder by it's name. 

In your overall shop layout use {module_contentholder, name="slider-{tag_name}"}.  If you were looking at the BEDroom catalog page and there was a content holder named "BEDroom" then I think it should work.  Do this for all your slideshows-- move them to a content holder with the name of the catalog they are for.  Then, you don't have to use your custom pages for the catalog and you can also put your products in the right catalog so that you end up having the slideshow at the top of the main catalog page.

If you don't have a content holder setup for, say, the Barstools sub-category then the {module_contentholder} should fail silently if it can't find a matching content holder by name.

When you've got that content holder module in your overall shop layout then you should be ok to use those top level category pages.

I also suppose your next objective would be to get rid of or customize the "This catalog has no products" and "This catalog has no sub-catalogs"... the following jQuery can help you do that. Put it in "jquery.main.js":

---

(function($){

    $(document).ready(function() {

        var noProductsMessage = "Your no products message";

        var noSubCatalogMessage = "Your no sub-catalogs message";

       $("body").html(

           $("body").html()

           .replace(/this catalog has no products\./gi, noProductsMessage)

           .replace(/this catalog has no sub-catalogs\./gi, noSubCatalogMessage)

       );

    });

})(jQuery);

---

Change the variables in the function above to reflect your custom message or make it an empty string: "" if you want to remove the text instead of replace it with something else.

[sleepingcatnz]

God you're good! Thanks Trickster - I'll try it & let you know how I get on. It's going to be a long weekend as the site goes live on Mon - yikes!

Thanks so much, Glenn.

[sleepingcatnz]

Trickster,

Yes works well - you are a genius, my friend. In the overall shop layout, I used:

{module_contentholder, name="{tag_name}"}

& in the js changed the var to an empty message as follows:

(function($){

$(document).ready(function() {

var noProductsMessage = "Your no products message";

var noSubCatalogMessage = "Your no sub-catalogs message";

$("body").html(

$("body").html()

.replace(/This catalog has no products\./gi, noProductsMessage)

.replace(/This catalog has no sub-catalogs\./gi, noSubCatalogMessage)

);

});

})(jQuery);

Success! I hope I can reciprocate & help out in some way as you-ve been a huge help. I really appreciate your clever work.

Glenn.

[sleepingcatnz]

Trickster, just an update - there was conflicting js. The product name was duplicated in the breadcrumbs on the large product page so I moved the new js to catalogue.html & it fixed the conflict.

Cheers,

Glenn.

[Liam Dilley]

Glen, get into external scripting and creating functions etc.

All that goes poof.

[sleepingcatnz]

I still have a slight problem as the breadcrumbs repeat the product name on the Individual large product pages but only on two of the sub-categories (LIVINGroom/Shelves & LIVINGroom/Coffee Tables). Seems fine on other pages

https://meluka.worldsecuresystems.com/livingroom/shelves-1/shelves

I've added jQuery to catalogue.html to hide the slideshow on the sub-catalog pages as follows:

(function($){
$(document).ready(function() {
var noProductsMessage = "";
var noSubCatalogMessage = "";

$("body").html(
$("body").html()
.replace(/This catalog has no products\./gi, noProductsMessage)
.replace(/This catalog has no sub-catalogs\./gi, noSubCatalogMessage)
);
});
})(jQuery);

If I insert this jQuery code in jquery.main.js the product name in the breadcrumbs repeats on all pages. Bit of a conundrum really...

[thetrickster888]

That jquery I gave you should only replace the message that appears when you don't have sub-catalogs and products on a page.  BC by default will print a message that says "This catalog has no products." or "This catalog has no sub-catalogs."  The javascript I gave you will replace that phrase with a message you want or if you leave the variables as empty strings it will remove those messages.

This shouldn't have anything to do with breadcrumbs. If you look at this page: https://meluka.worldsecuresystems.com/livingroom you'll see at the bottom the message "This catalog has no products." With my script you can replace that message... same goes with the one where it says there's no sub-catalogs.

Your breadcrumb issue might be something else entirely-- I don't really see what you're seeing right now or I am confused.

On another note-- there are a lot of javascript errors now on your site which weren't there before.  It seems like jQuery isn't loaded properly on your site but it is definitely referenced properly.  Did you make any changes to any of your javascript files besides adding the script I gave you?  It looks like you are using jQuery.noconflict() and I'm not sure if you were doing that before... there really isn't a need to use noconflict since you aren't using any other javsacript libraries like mootools or prototype.

Can you revert the changes to your javascript files that you might have made in the last 24 hours?  Don't worry about my script either for now-- you can paste that into your javascript file when we know there arent't a bunch of javascript errors.

[sleepingcatnz]

Thanks Trickster,

I've removed the code & product name is repeated on all pages.

I haven't changed any other js.

I already had this code on the large_product.html page:

jQuery(document).ready(function(){
var productName = jQuery('.details h5').text();
jQuery('.main-frame p.breadcrumbs').append(" : " + productName + "");
});

jQuery(document).ready(function(){
jQuery('#zoom img').wrap('').css('display', 'block').parent().zoom({on:'click'});
});

I appreciate your help with this,

Glenn.

[thetrickster888]

Something's messed up with your javascript-- It's almost as if jQuery isn't loaded on the page-- if you hit Cmd-Shift-J you will see a bunch of javascript errors in red.  Those weren't there yesterday when I was telling you about your slideshow issue.  You'll notice your top-level catalog slideshows don't work because of those javascript errors.

You must have added something to some of your javascript files since yesterday.  Some of your scripts are referencing the "jQuery" variable and it's not present...

Did you add "jQuery.noconflict();" to different places in your code since yesterday?

[thetrickster888]

I'm pretty sure the problem is the javascript statement "jQuery.noConflict();" that you added in the head of your page templates and also in files like jquery.main.js.

Here's a fiddle I came up with... you'll see I have a simple jQuery function that changes the html of a div to tell you jQuery is working... it works fine originally but if you uncomment out the line "jQuery.noConflict();" and click the "Run" button on the Fiddle you'll see the jQuery stops working.

http://jsfiddle.net/thetrickster/zXmYu/

My suggestion is to comment out in your code anywhere you see "jQuery.noConflict();"  you can comment out a line by putting // in front of the line of javascript. Comment out every place you see that line-- in your page templates and in all your .js files you reference in your site.  If you comment it out you can uncomment it later just in case that's not the issue.

[sleepingcatnz]

Trickster,

I had a thought - I changed the html in page_content.html from:

{tag_cataloguelist,4} {tag_productlist,3,,30,,,true}

to:

{module_contentholder, name="{tag_name}"} {tag_cataloguelist,4,,,,hideEmptyMessage} {tag_productlist,3,,30,,hideEmptyMessage,true}

Could that have affected it?

Glenn.

[sleepingcatnz]

Trickster,

From what I can see, the line jQuery.noConflict(); only appears in line 1 of the file jquery.main.js

I tried the fiddle but unfortunately to no avail. I also checked out earlier versions & that line was there also. It's confusing as I haven't added any other js apart from:

(function($){

$(document).ready(function() {

var noProductsMessage = "Your no products message";

var noSubCatalogMessage = "Your no sub-catalogs message";

$("body").html(

$("body").html()

.replace(/this catalog has no products\./gi, noProductsMessage)

.replace(/this catalog has no sub-catalogs\./gi, noSubCatalogMessage)

);

});

})(jQuery);

When I remove this code the breadcrumbs work properly. Could the conflict be with something in this code or is there another way to remove the line "This catalog has no products." from the Catalog pages please"

Thanks for your patience!

Glenn.

[thetrickster888]

The reason this code might be interfering with your breadcrumbs has everything to do with javascript errors.  The fiddle I showed you doesn't need to be included in your site-- it's just an example of what's going wrong with your site right now.  If you use "jQuery.noConflict();" the way you are it negates the $ and jQuery variables you can normally use to access jQuery methods.  It's just an example of the way you are using it is actually breaking all your javascript calls to jQuery.

"jQuery.noConflict();" is in your HEAD element in your page templates and also on line 1 of jquery.main.js. So on line 1 of jquery.main.js this:

jQuery.noConflict();

Becomes:

//jQuery.noConflict();

And in your page templates this:

<script type="text/javascript">

        jQuery.noConflict();

        jQuery(document).ready(function() {

            jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

            jQuery('.productPopletsItem a').click(function(e){

                e.preventDefault();

                jQuery('.image p img').attr('src', jQuery(this).attr('href'));

            });

        });

</script>

Becomes:

<script type="text/javascript">

        //jQuery.noConflict();

        jQuery(document).ready(function() {

            jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

            jQuery('.productPopletsItem a').click(function(e){

                e.preventDefault();

                jQuery('.image p img').attr('src', jQuery(this).attr('href'));

            });

        });

</script>

That should make it so your slideshows and the rest of your javascripts work again-- right now they aren't working and it doesn't really have to do with the script I provided you.

But-- you don't want to add that script to your catalog.html template because it was repeating that script for every catalog-- we only need that script called once per page so you can simply add it to the end of jquery.main.js file.  Trust me-- that script itself has nothing to do with the breadcrumbs acting up.  Do these steps and get back to me.

[sleepingcatnz]

Thanks Trickster,

Yes that's done the trick for removing the line of text under the the slide show on the Catalog pages, However, whenever I include the js as per below, the product name in the breadcrumbs repeats itself. Could it have something to do with the following code (in large_product.html)?

jQuery(document).ready(function(){

var productName = jQuery('.details h5').text();

jQuery('.main-frame p.breadcrumbs').append(": " + productName + "");

});

Thanks,

Glenn.

[thetrickster888 · Accepted solution]

I can't tell why exactly that is happening twice-- the script you mentioned is the script that's updating the breadcrumbs to include the product title.

Just to be sure that the script I gave you to remove the empty catalog messages isn't interfering with this script, let's make a change to it so it's not so broad as to target the whole BODY element, but we'll point it to the elements that contain those messages specifically.  Overwrite my script at the end of jquery.main.js with this new version:

(function($) {

    $(document).ready(function() {

       var noProductsMessage = "";

       var noSubCatalogMessage = "";

       var containers = $(".productItemNotFound, .catalogueItemNotFound");

       containers.each(function() {

           $(this).html(

               $(this).html()

               .replace(/this catalog has no products\./gi, noProductsMessage)

               .replace(/this catalog has no sub-catalogs\./gi, noSubCatalogMessage)

           );

       });

   });

})(jQuery);

[sleepingcatnz]

Trickster,

How is it possible for one person to know so much? Once again, you've nailed it! Yes this has stopped the product name repeating itself. You are very clever & your effort is hugely appreciated.

Now I just need to get the payment gateway sorted, add the rest of the product & tidy up the pages... Site is going live tomorrow. I have my work cut out for me.

Thanks again Trickster - you really are a js Guru. I'll let you know how it all goes.

Glenn.

[Liam Dilley]

Glen:

http://forums.adobe.com/docs/DOC-2964

Calling the dom multiple times is not great and will also lead to loop and value problems going forward.

Also, what thetrickster probably does not know with his code and heading perfomance is jQuery chaining and objects..

jQuery('.productPopletsItem a').attr('onclick','').attr('rel','');

jQuery('.productPopletsItem a').click(function(e){

     e.preventDefault(); j

     Query('.image p img').attr('src', jQuery(this).attr('href'));

});

I would be doing as the following in this situation, but I wont confuse you with the full better sollution which is a bit simpler since this will work for you. But to just help you get an insight on how you can improve your code further.

var popletLink = $j('.productPopletsItem a');

popletLink.attr('onclick','').attr('rel','')

).click(function(e){

     e.preventDefault();

     $j('.image img').attr('src', $j(this).attr('href'));

});

The less your tree down interms of the html elements the better the perfomance as well. Hope this helps

[sleepingcatnz]

Thanks Liam,

I'm totally flipping out as the site needs to go live tomorrow am - yikes!

Glenn.

[Liam Dilley]

Dont worry for now, like I said - Trickster is helping you have enough to get it done. But for your next and going forward, just trying to help your code improve

[sleepingcatnz]

Thanks Liam,

Yes Trickster has been a huge help & I couldn't have done it without him.

You may be able to help tho please? I get this error when I try & process a credit card statement:

There was an error processing your credit card. Please correct this and try again.

ERROR: An error occurred while processing credit card


Gateway Response: Invalid vendor account


Please go back and correct this.

I have set up Payment Gateway using PayPal PayFlow Payment Gateway.

Regards,

Glenn.

[Liam Dilley]

Make sure you entered the right details into the fields. You set this up before? Comon mistake I see is people putting in the wrong info into the fields.

[sleepingcatnz]

Liam,

No this is the first time for me there's just the Gateway, Username, Password & Partner. I put the API Signature in the Partner box - is that correct?

Glenn.

[Liam Dilley]

You gone through this Glen?

http://helpx.adobe.com/business-catalyst/partner/setting-paypal-payflow-payment-gateway.html

[sleepingcatnz]

Does it need to be Pro?

Please see attached screen grab.

Thanks,

Glenn.